<template>
  <div class="root">
    <acme-app-bar title="Dialog"></acme-app-bar>
    
    <div class="ui-title">基础用法</div>
    <acme-cell-group :radius="10" width="95%">
      <acme-cell title="提示弹窗" link @click="showPopup1" />
    </acme-cell-group>
    
    <acme-dialog v-model="show1" title="标题" content="支持组件调用方式" />
    
    <div class="ui-title">其他用法</div>
    <acme-cell-group :radius="10" width="95%">
      <acme-cell title="确认弹窗" link @click="showPopup2('confirm')" />
      <acme-cell title="圆角按钮" link @click="showPopup2('round')" />
      <acme-cell title="回弹效果" link @click="showPopup2('scale')" />
    </acme-cell-group>

    <acme-dialog 
      v-model="show2" 
      title="标题"
      :scale="scale"
      :type="type" 
      :buttonType="buttonType" 
      content="支持组件调用方式"
      @closed="closed"
    >
    </acme-dialog>
  </div>
</template>

<script>
  import AcmeCellGroup from "@/components/acme-design/cell-group/index.vue"
  import AcmeCell from "@/components/acme-design/cell/index.vue"
  import AcmeDialog from "@/components/acme-design/dialog/index.vue"
  
  export default {
    components: {
      AcmeCellGroup,
      AcmeCell,
      AcmeDialog,
    },
    data() {
      return {
        show1: false,
        show2: false,
        scale: 1,
        type: 'tips',
        buttonType: ''
      };
    },
    methods: {
      showPopup1() {
        this.show1 = true
      },
      showPopup2(type) {
        this.show2 = !this.show2;

        switch(type) {
          case 'confirm':
            this.type = 'confirm';
            break;
          case 'round':
            this.type = 'confirm';
            this.buttonType = 'round'
            break;
          case 'scale':
            this.type = 'confirm';
            this.scale = 1.05
            break;
        }
      },
      closed() {
        this.type = ''
        this.buttonType = ''
        this.scale = 1
      }
    },
  };
</script>